<template>
    <Header></Header>
    <div class="content" style="min-height: 500px">
        <div class="title">
            <h1>{{ STEP_INDEX[currentStep] }}</h1>
        </div>
        <el-steps
            direction="vertical"
            class="steps"
            style="max-width: 600px; margin: 30px auto"
            :active="currentStep"
            finish-status="success"
            align-center
        >
            <el-step v-for="(item, index) in STEP_INDEX" :key="index" :title="item" />
        </el-steps>
        <!-- 竞赛基本信息表单 -->
        <div v-if="currentStep == 0" class="form">
            <el-form label-position="top" :model="upContestForm" :rules="upContestFormRules" ref="contestFormRef">
                <el-form-item label="竞赛名称" prop="title">
                    <el-input v-model="upContestForm.title"></el-input>
                </el-form-item>
                <el-form-item label="竞赛简介" prop="description">
                    <el-input v-model="upContestForm.description" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="竞赛类型" prop="categoryId">
                    <!-- @vue-ignore -->
                    <el-cascader
                        placeholder="请选择竞赛类型"
                        v-model="upContestForm.categoryId"
                        :options="categoryList as unknown as CascaderOption[]"
                        :props="optionProps"
                        filterable
                    />
                </el-form-item>
                <el-form-item label="比赛地点" prop="local">
                    <el-input v-model="upContestForm.local"></el-input>
                </el-form-item>
                <el-form-item label="主办方" prop="organizer">
                    <el-select v-model="upContestForm.organizer" filterable placeholder="主办方" style="width: 240px">
                        <el-option v-for="item in organizersData" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="竞赛封面" prop="cover">
                    <el-upload
                        v-model:file-list="fileList"
                        ref="upload"
                        :auto-upload="false"
                        :headers="upHeaders"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :on-change="handleChange"
                        :multiple="false"
                        list-type="picture-card"
                    >
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <template #file="{ file }">
                            <el-dialog v-model="isFile" title="封面" :before-close="handleBeforeClose" width="1300" destroy-on-close center>
                                <img :src="file.url" id="cropper" alt="" />
                                <template #footer>
                                    <div class="dialog-footer">
                                        <el-button @click="cropImage" type="primary"> 裁剪并上传 </el-button>
                                    </div>
                                </template>
                            </el-dialog>
                            <div v-if="newImage">
                                <img class="el-upload-list__item-thumbnail" :src="newImage" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview()">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                </span>
                            </div>
                            <el-dialog v-model="dialogVisible">
                                <img w-full :src="dialogImageUrl" alt="Preview Image" />
                                <template #footer>
                                    <div class="dialog-footer">
                                        <el-button @click="dialogVisible = false" type="primary"> 关闭 </el-button>
                                    </div>
                                </template>
                            </el-dialog>
                        </template>
                    </el-upload>
                    <span style="padding-left: 20px; color: #666">注：重新上传默认替换掉原来的封面</span>
                </el-form-item>
                <el-form-item label="报名开始时间" prop="enrollStartDate">
                    <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="upContestForm.enrollStartDate"
                        type="date"
                        placeholder="报名开始时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="报名结束时间" prop="enrollEndDate">
                    <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="upContestForm.enrollEndDate"
                        type="date"
                        placeholder="报名开始时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="比赛开始时间" prop="startDate">
                    <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="upContestForm.startDate"
                        type="date"
                        placeholder="报名开始时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="比赛结束时间" prop="endDate">
                    <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="upContestForm.endDate"
                        type="date"
                        placeholder="报名开始时间"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="是否允许提交电子档案">
                    <el-radio-group v-model="upContestForm.isEmail">
                        <el-radio :value="0">是</el-radio>
                        <el-radio :value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否使用系统自带模板">
                    <el-radio-group v-model="upContestForm.isSystem">
                        <el-radio :value="0">是</el-radio>
                        <el-radio :value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否允许评论">
                    <el-radio-group v-model="upContestForm.isComment">
                        <el-radio :value="0">是</el-radio>
                        <el-radio :value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="是否允许组队">
                    <el-radio-group v-model="upContestForm.isTeam">
                        <el-radio :value="0">是</el-radio>
                        <el-radio :value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否收费">
                    <el-radio-group v-model="upContestForm.isToll">
                        <el-radio :value="0">是</el-radio>
                        <el-radio :value="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 最大报名人数 -->
                <el-form-item label="最大报名人数" prop="personNum">
                    <el-input v-model="upContestForm.personNum"></el-input>
                </el-form-item>
                <!-- 这里 只有当 isToll 为 true 时才显示 -->
                <el-form-item v-if="upContestForm.isToll == 0" label="费用金额" prop="toll">
                    <el-input v-model="upContestForm.toll"></el-input>
                </el-form-item>
                <el-form-item v-if="upContestForm.isTeam == 0" label="队伍人数" prop="teamNum">
                    <el-input v-model="upContestForm.teamNum" type="number"></el-input>
                </el-form-item>
                <el-form-item label="竞赛说明" prop="content">
                    <AiEditor :disabled="false" v-model="upContestForm.content" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="currentStepNext()" type="primary">下一步</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 设置竞赛报名模板 -->
        <div v-if="currentStep === 1" class="form" style="min-height: 500px">
            <el-form label-position="top">
                <component v-for="(item, index) in upContestForm.templateValueList" :key="index" :label="item.name" is="el-form-item">
                    <div class="template-form-item">
                        <div class="hove">
                            <div @click="handleUpdateForm(item)" class="edit">
                                <el-button :disabled="item.is_delete" type="primary" :icon="Edit" />
                            </div>
                            <div @click="handleDeleteForm(item)" class="delete">
                                <el-button :disabled="item.is_delete" type="primary" :icon="Delete" />
                            </div>
                        </div>
                        <!-- 下拉框 -->
                        <component v-if="item.type === 1" is="el-select" :type="item.type">
                            <component
                                v-for="(value, index) in item.value"
                                :key="index"
                                :label="value"
                                :value="value"
                                is="el-option"
                                :type="item.type"
                            >
                            </component>
                        </component>
                        <!-- 普通文本框 -->
                        <component v-else is="el-input" :type="item.type"> </component>
                    </div>
                </component>
                <add-apply-or-update v-if="addOrUpdateFormVisible" @syncAdd="syncAdd"  ref="addOrUpdateFormRef" />
            </el-form>
            <el-button type="primary" @click="add">添加表单项</el-button>
            <el-button @click="currentStep--" type="primary">上一步</el-button>
            <el-button type="primary" @click="currentStep++">下一步</el-button>
        </div>
        <!-- 验证身份信息 -->
        <div v-if="currentStep === 2" class="form">
            <el-form label-position="top" :model="upContestForm" :rules="upContestFormRules">
                <el-form-item label="密码" prop="password" ref="contestFormRef">
                    <el-input type="password" v-model="upContestForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="useDebounce()" type="primary">发布竞赛</el-button>
                    <el-button type="primary" @click="currentStep--">上一步</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 发布竞赛 -->
        <div v-if="currentStep === 3" class="release-success">
            <div class="icon-success">
                <svg
                    t="1715586489705"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4303"
                    width="100"
                    height="100"
                >
                    <path
                        d="M512 64.3C264.7 64.3 64.3 264.7 64.3 512c0 247.3 200.5 447.7 447.7 447.7 247.3 0 447.7-200.5 447.7-447.7 0-247.3-200.4-447.7-447.7-447.7z m257.9 393.3c-80.9 9.1-260.1 164.9-321.5 250.9-66.7-93.9-150.1-153.5-209.8-180l126.3-67.7 86.8 118.7s160-217.7 348.9-287.5c-10.4 61.5-41.7 72.5-30.7 165.6z"
                        fill="#2FC25B"
                        p-id="4304"
                    ></path>
                </svg>
                <div class="text">
                    <span>发布成功</span>
                    <p>恭喜您，竞赛发布成功！社区将在24小时内审核并发布竞赛。</p>
                </div>
            </div>
            <div class="btn">
                <el-button @click="userRouter.push('/')" type="primary">回到首页</el-button>
                <el-button @click="pushNewContest()" type="primary">发布新的竞赛</el-button>
            </div>
        </div>
    </div>
    <FixedMenu />
    <Footer></Footer>
</template>
<script lang="ts" setup>
import { nextTick, ref, watch, reactive } from "vue";
import { ElInput, genFileId, ElMessage, ElLoading, ElMessageBox } from "element-plus";
import type { UploadFile, FormRules, UploadInstance, UploadProps, UploadRawFile, FormInstance } from "element-plus";
import { Plus, ZoomIn, Delete, Edit } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { PublishRaceParamsType, TemplateValue } from "@/types/publishContest";
import { pushContest } from "@/api/contest";
import { debounce } from "@/utils/debounce";
import { isQuit } from "@/utils/tools";
import AddApplyOrUpdate from "./addApplyOrUpdate.vue";
import axios from "axios";
import { usePublish } from "@/hooks/publish";
const userRouter = useRouter();
const STEP_INDEX = ref(["竞赛基本信息", "设置竞赛报名模板", "验证身份信息", "发布竞赛"]);

const pushNewContest = () => {
    window.removeEventListener("beforeunload", isQuit);
    userRouter.go(0);
};

// #region 添加竞赛封面
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const handlePictureCardPreview = () => {
    dialogImageUrl.value = newImage.value!;
    dialogVisible.value = true;
};
const upload = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = files => {
    upload.value!.clearFiles();
    const file = files[0] as UploadRawFile;
    file.uid = genFileId();
    upload.value!.handleStart(file);
};
const handleSuccess: UploadProps["onSuccess"] = ({}, response: any) => {
    upContestForm.value.cover = response.response.url as string;
};
// @ts-ignore
const Cropper: any = window.Cropper;
let cropper: any;
let newImage = ref("");
let isFile = ref(false);
let fileList = ref<UploadFile[]>([]);
// 初始化裁剪图片弹窗
const handleChange = async (rawFile: UploadFile) => {
    if (rawFile!.raw!.type !== "image/jpeg" && rawFile!.raw!.type !== "image/png") {
        ElMessage.error("请选择图片");
        return false;
    }
    isFile.value = true;
    await nextTick();
    let img = document.getElementById("cropper");
    // @ts-ignore
    cropper = new Cropper(img, {
        aspectRatio: 2 / 1,
        autoCrop: true,
        cropBoxResizable: false,
        dragMode: "move",
        // viewMode: 3,
        autoCropArea: 0.8,
    });
};
// 上传裁剪图片
const cropImage = () => {
    // @ts-ignore
    // 本地回显图片
    let base64Image = cropper.getCroppedCanvas().toDataURL("image/jpeg");
    newImage.value = base64Image;

    // 上传图片
    cropper!.getCroppedCanvas().toBlob((res: Blob) => {
        let file = new File([res], res.type, { type: res.type });
        let fromData = new FormData();
        fromData.append("file", file);
        axios
            .post("http://117.72.35.196:8848/common/upload", fromData, {
                headers: {
                    "Content-Type": "multipart/form-data",
                    token: upHeaders.value.token,
                },
            })
            .then(res => {
                upContestForm.value.cover = res.data.url as string;
            })
            .catch(() => {
                ElMessage.error("上传图片失败，请重新上传");
            });
    });
    isFile.value = false;
};

// 裁剪弹窗关闭的回调
const handleBeforeClose = (done: any) => {
    ElMessageBox.confirm("当前裁剪图片未上传确定要关闭吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showClose: false,
    }).then(() => {
        done();
        // 清空 图片 list
        fileList.value = [];
    });
};
// #endregion

// #region 比赛表单基本信息
let contestFormRef = ref<FormInstance>();
const upContestForm = ref<PublishRaceParamsType>({
    categoryId: "", // 活动类别
    content: "", // 内容
    cover: "", // 封面图片
    description: "", // 简介
    startDate: "", // 开始时间
    endDate: "", // 结束时间
    enrollEndDate: "", // 报名结束时间
    enrollStartDate: "", // 报名开始时间
    imgNameList: [], // 图片名称列表
    imgUrlList: [], // 图片地址列表
    isComment: 0, // 是否允许评论
    isEmail: 0, // 是否允许提交电子档案
    isSystem: 0, // 是否使用系统自带模板
    isTeam: 0, // 是否允许组队
    isToll: 0, // 是否收费
    local: "", // 地点
    organizer: "", // 主办方
    password: "", // 密码
    personNum: 0, // 人数
    pushId: "", // 推送ID
    teamNum: 0, // 队伍人数
    title: "", // 标题
    toll: 0, // 费用金额
    templateValueList: [],
});

// 比赛表单 formData 验证规则
const upContestFormRules = reactive<FormRules<typeof upContestForm>>({
    categoryId: [{ required: true, message: "竞赛类别不能为空", trigger: ["blur", "change"] }], // 活动类别
    content: [{ required: true, message: "竞赛内容不能为空", trigger: ["blur", "change"] }], // 内容
    cover: [{ required: true, message: "请上传竞赛封面", trigger: ["blur", "change"] }], // 封面图片
    description: [{ required: true, message: "请填写竞赛简介", trigger: ["blur", "change"] }], // 简介
    startDate: [
        { validator: checkEnrollEndDate, trigger: ["blur", "change"] },
        { required: true, message: "请填写开始时间", trigger: ["blur", "change"] },
    ], // 开始时间
    endDate: [
        { validator: checkEnrollEndDate, trigger: ["blur", "change"] },
        { required: true, message: "请填写结束时间", trigger: ["blur", "change"] },
    ], // 结束时间
    enrollEndDate: [
        { validator: checkEnrollEndDate, trigger: ["blur", "change"] },
        { required: true, message: "请填写报名结束时间", trigger: ["blur", "change"] },
    ], // 报名结束时间
    enrollStartDate: [
        { validator: checkEnrollEndDate, trigger: ["blur", "change"] },
        { required: true, message: "请填写报名开始时间", trigger: ["blur", "change"] },
    ], // 报名开始时间
    local: [{ required: true, message: "请添加地点", trigger: ["blur", "change"] }], // 地点
    organizer: [{ required: true, message: "请添加主办方", trigger: ["blur", "change"] }], // 主办方
    password: [{ required: true, message: "请填写密码", trigger: ["blur", "change"] }], // 密码
    personNum: [{ required: true, message: "请填写人数", trigger: ["blur", "change"] }], // 人数
    teamNum: [{ required: true, message: "请填写队伍人数", trigger: ["blur", "change"] }], // 队伍人数
    title: [{ required: true, message: "请填写标题", trigger: ["blur", "change"] }], // 标题
    toll: [{ required: true, message: "请填写金额", trigger: ["blur", "change"] }], // 费用金额
});

function checkFormDate(callback: Function) {    
    console.log('123',new Date(upContestForm.value.enrollStartDate).setHours(23,59,59,0));
    console.log('456',new Date());
    
    if (new Date(upContestForm.value.enrollEndDate).setHours(23,59,59,0) <= new Date().getTime()) {
            callback(new Error("报名结束时间不能小于当前时间"));
        } else if (new Date(upContestForm.value.enrollEndDate) < new Date(upContestForm.value.enrollStartDate)) {
            callback(new Error("报名结束时间不能小于报名开始时间"));
        } else if (new Date(upContestForm.value.enrollEndDate) > new Date(upContestForm.value.startDate)) {
            callback(new Error("报名结束时间不能大于比赛开始时间"));
        } else if (new Date(upContestForm.value.enrollEndDate) > new Date(upContestForm.value.endDate)) {
            callback(new Error("报名结束时间不能大于比赛结束时间"));
        } else {
            // 报名结束时间检查通过
        }

        if (new Date(upContestForm.value.enrollStartDate).setHours(23,59,59,0) <= new Date().getTime()) {
            callback(new Error("报名开始时间不能小于当前时间"));
        } else if (new Date(upContestForm.value.enrollStartDate) > new Date(upContestForm.value.enrollEndDate)) {
            callback(new Error("报名开始时间不能大于报名截止时间"));
        } else if (new Date(upContestForm.value.enrollStartDate) >= new Date(upContestForm.value.startDate)) {
            callback(new Error("报名开始时间不能大于等于比赛开始时间"));
        } else if (new Date(upContestForm.value.enrollStartDate) > new Date(upContestForm.value.endDate)) {
            callback(new Error("报名开始时间不能大于比赛结束时间"));
        } else {
            // 报名开始时间检查通过
        }

        if (new Date(upContestForm.value.startDate) < new Date()) {
            callback(new Error("比赛开始时间不能小于当前时间"));
        } else if (new Date(upContestForm.value.startDate) < new Date(upContestForm.value.enrollStartDate)) {
            callback(new Error("比赛开始时间不能小于报名开始时间"));
        } else if (new Date(upContestForm.value.startDate) < new Date(upContestForm.value.enrollEndDate)) {
            callback(new Error("比赛开始时间不能小于报名截止时间"));
        } else if (new Date(upContestForm.value.startDate) > new Date(upContestForm.value.endDate)) {
            callback(new Error("比赛开始时间不能大于比赛结束时间"));
        } else {
            // 比赛开始时间检查通过
        }

        if (new Date(upContestForm.value.endDate) < new Date()) {
            callback(new Error("比赛结束时间不能小于当前时间"));
        } else if (new Date(upContestForm.value.endDate) < new Date(upContestForm.value.enrollStartDate)) {
            callback(new Error("比赛结束时间不能小于报名开始时间"));
        } else if (new Date(upContestForm.value.endDate) < new Date(upContestForm.value.enrollEndDate)) {
            callback(new Error("比赛结束时间不能小于报名截止时间"));
        } else if (new Date(upContestForm.value.endDate) < new Date(upContestForm.value.startDate)) {
            callback(new Error("比赛结束时间不能小于比赛开始时间"));
        } else {
            // 比赛结束时间检查通过
        }

return true;
}

function checkEnrollEndDate({}, value: any, callback: any) {
    if (value) {
        if (checkFormDate(callback)) {
            callback();
        }
    } else {
        callback(new Error("请选择时间"));
    }
}

// 记录 当前发布竞赛的步骤
const currentStep = ref(0);
// 校验 基本信息表单
const currentStepNext = () => {
    contestFormRef.value?.validate((valid: boolean) => {
        if (valid) {
            currentStep.value++;
        } else {
            ElMessage.error("请检查表单内容是否正确");
        }
    });
};
// #region 报名表单数据

// 删除
const handleDeleteForm = (item: TemplateValue) => {
    ElMessageBox.confirm("确定要删除该数据吗?")
        .then(async () => {
            addOrUpdateFormVisible.value = true;
            await nextTick();
            addOrUpdateFormRef.value.deleteItem(item);
            ElMessage({
                type: "success",
                message: "操作成功",
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "已取消",
            });
        });
};
let addOrUpdateFormRef = ref();
let addOrUpdateFormVisible = ref(false);
const add = async () => {
    addOrUpdateFormVisible.value = true;
    await nextTick();
    addOrUpdateFormRef.value.init();
};
const syncAdd = (list: TemplateValue[]) => {
    upContestForm.value.templateValueList = list;
};
const handleUpdateForm = async (item: TemplateValue) => {
    addOrUpdateFormVisible.value = true;
    await nextTick();
    addOrUpdateFormRef.value.init(item);
};
watch(
    () => currentStep.value,
    async () => {
        if (currentStep.value === 1) {
            addOrUpdateFormVisible.value = true;
            await nextTick();
            let list = addOrUpdateFormRef.value.createList(upContestForm.value.teamNum, upContestForm.value.isTeam);
            upContestForm.value.templateValueList = list;
            addOrUpdateFormVisible.value = false;
        }
    },
    { immediate: true }
);
// #endregion

// 发布竞赛
const upContestInfo = async () => {
    if (upContestForm.value.password.length === 0) {
        ElMessage.error("密码不能为空");
        return;
    }
    ElLoading.service({
        lock: true,
        text: "正在发布竞赛...",
        background: "rgba(0, 0, 0, 0.1)",
    });
    upContestForm.value.categoryId =  upContestForm.value.categoryId[upContestForm.value.categoryId.length - 1]
    upContestForm.value.teamNum = +upContestForm.value.teamNum;
    upContestForm.value.toll = +upContestForm.value.toll;
    upContestForm.value.templateValueList.forEach(item => {
        if (item.type === 1 && Array.isArray(item.value)) {
            item.value = item.value.join();
        }
    });
    let res = await pushContest(upContestForm.value);
    if (res.data.code != 200) {
        ElMessage.error(res.data.msg);
        ElLoading.service().close();
        return;
    }
    currentStep.value++;
    ElMessage.success(res.data.msg);
    ElLoading.service().close();
};
// 防抖
const useDebounce = debounce(upContestInfo, 1000);
// 竞赛分类
const { categoryList, upHeaders, organizersData, optionProps } = usePublish();
</script>
<style lang="scss" scoped>
.content {
    margin: 0 auto;
    height: 100%;
    width: 800px;

    .steps {
        position: fixed;
        height: 350px;
        top: 120px;
        left: 10px;
    }

    .title {
        margin-top: 50px;
        text-align: center;
        height: 36px;

        h1 {
            margin: 0 auto;
            width: fit-content;
            font-size: 26px;
            color: #787575;
            position: relative;
            border-bottom: 1px solid #ebe7e7;

            &:before {
                content: "";
                display: inline-block;
                width: 80px;
                height: 2px;
                background-color: #9a9797;
                position: absolute;
                left: -90px;
                top: 50%;
                transform: translateY(-50%);
            }

            &:after {
                content: "";
                display: inline-block;
                width: 80px;
                height: 2px;
                background-color: #9a9797;
                position: absolute;
                right: -90px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    .form {
        margin-top: 20px;

        .template-form-item {
            width: 100%;

            .hove {
                position: relative;
                width: 100%;

                div {
                    padding: 0 10px;
                    margin-right: 10px;
                    float: right;
                    cursor: pointer;
                    z-index: 100;
                    border-radius: 10px;
                }

                div:nth-child(1) {
                    position: absolute;
                    top: -40px;
                    right: -10px;
                }

                div:nth-child(2) {
                    position: absolute;
                    top: -40px;
                    right: 40px;
                }
            }
        }
    }

    .release-success {
        margin-top: 50px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .icon-success {
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                font-size: 28px;
                font-weight: 900;
            }

            .text {
                margin-left: 20px;
            }
        }

        .btn {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
    }
}

.el-message,
.el-message--error,
.is-center {
    z-index: 10000 !important;
}

:deep(.el-overlay) {
    z-index: 1000 !important;
}
</style>
